<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px" inline>
      <el-form-item label="月份">
        <el-date-picker value-format="yyyyMM" v-model="form.month" style="width: 200px" type="month" placeholder="请选择月份" :picker-options="endDateDisabled" :clearable="false"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handle_search" style="margin-left: 10px">查询</el-button>
        <el-button type="success" @click="showImportDialog">导入</el-button>
        <el-button type="warning" @click="handle_downloadTemp">下载模板</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName">
      <el-tab-pane label="日志展现" name="tab1" />
      <el-tab-pane label="明细展现" name="tab2" />
    </el-tabs>

    <transition name="fade-transform" mode="out-in">
      <keep-alive>
        <component :is="activeName" :ref="activeName" :params="form"></component>
      </keep-alive>
    </transition>

    <import-dialog ref="importDialog" @refresh="handle_search"></import-dialog>

  </div>
</template>
<script>
import { downLoadExcelParams } from "@/utils/zipdownload";
export default {
  components: {
    tab1: () => import("./components/tab1.vue"), //日志展现
    tab2: () => import("./components/tab2.vue"), //明细展现
    ImportDialog: () => import("./importDialog.vue"),
  },
  data() {
    return {
      form: {
        month: this.dayjs().format("YYYYMM"),
      },
      activeName: "tab1",
      endDateDisabled: this.pickerDisabled(),
    };
  },
  watch: {
    activeName(val) {},
  },
  methods: {
    handle_search() {
      this.$refs[this.activeName].getList(this.form);
    },
    showImportDialog() {
      this.$refs.importDialog.init();
    },
    //下载模板
    handle_downloadTemp() {
      downLoadExcelParams("/oneAdjustment/export", {}, "一次性费用调整模版");
    },
    pickerDisabled() {
      return {
        disabledDate: (t) => {
          return this.dayjs(t).format("YYYYMM") > this.dayjs().format("YYYYMM");
        },
      };
    },
  },
};
</script>
